<template>
  <div :class="{'indexTable bgWhite customer expandTable': true, 'tableExpand': !isExpand}" ref="content" id="device">
   <el-form ref="form" class="pb_form ">
      <el-input v-model="searchForm.email.value " placeholder="邮箱" @keyup.enter.native="getTableList"></el-input>
      <el-input v-model="searchForm.order_no.value " placeholder="订单号" @keyup.enter.native="getTableList"></el-input>
      <el-select  v-model="searchForm.product_model_name.value" placeholder="产品型号名称" clearable  @keyup.enter.native="getTableList" @focus="getProductModelName" >
        <el-option v-for="item in productModelNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-input v-model="searchForm.product_title.value " placeholder="产品名称" @keyup.enter.native="getTableList"></el-input>
      <el-select v-model="searchForm.product_name.value" filterable placeholder="产品编码" clearable  @keyup.enter.native="getTableList" @focus="getProductNameList" >
        <el-option v-for="item in productNameList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-input v-model="searchForm.asin.value " placeholder="ASIN" @keyup.enter.native="getTableList"></el-input>

     
      <el-select  v-model="searchForm.first_type.value" placeholder="一级类型" @clear="clearFirstType" clearable  @keyup.enter.native="getTableList" @focus="getFirstTypeList">
        <el-option v-for="item in firstTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <el-select  v-model="searchForm.second_type.value" placeholder="二级类型" clearable  @keyup.enter.native="getTableList" @focus="getSecondTypeList">
        <el-option v-for="item in secondTypeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      
      <el-select  v-model="searchForm.warranty_status.value" placeholder="保修状态" clearable  @keyup.enter.native="getTableList" >
        <el-option v-for="item in warrantyStatusList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>

      <div class="createTime">
         <el-input v-model="localTime" placeholder="购买日期"></el-input>
         <el-date-picker @change="changeLocalTime"   v-model="localTimePicker"
          type="datetimerange" range-separator="至"  :default-time="['00:00:00' , '23:59:59']" 
         start-placeholder="开始日期"  value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期" placeholder="选择操作时间"></el-date-picker>
      </div>
      <div class="createTime">
         <el-input v-model="updateTime" placeholder="预估保修截止日期"></el-input>
         <el-date-picker @change="changeUpdateTime"   v-model="updateTimePicker"
          type="datetimerange" range-separator="至"  :default-time="['00:00:00' , '23:59:59']" 
         start-placeholder="开始日期"  value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期" placeholder="选择操作时间"></el-date-picker>
      </div>
      <el-select  v-model="searchForm.is_replacement.value" placeholder="是否换货" clearable  @keyup.enter.native="getTableList" >
        <el-option v-for="item in isExchangeList" :key="item.id" :value="item.value" :label="item.label"></el-option>
      </el-select>
      <div class="isExpand" @click="isExpandForm">
        <p class="hide" v-show="isExpand">收起 <i class="iconfont icon-arrow_1"></i></p>
        <p class="expand" v-show="!isExpand">展开 <i class="iconfont icon-arrow_1"></i></p>
      </div>
    </el-form>
    <div class="btnContainer" ref="btn">
      <div>
        <el-button type="del" @click="closeExportDialog()" v-if="$_has('/equipment/export')">导出</el-button>
      </div>
      <div>
        <el-button type="search" @click="getTableList" v-if="$_has('/equipment/list')">查询</el-button>
        <el-button type="del" @click="resetForm">重置</el-button>
      </div>
    </div>
    <el-table :data="listTable" :height="tableH" :row-class-name="rowClassName" ref="table" @row-click="RowClick"
     @selection-change="handleSelectionChange" :row-key="function(row){return row.id}" v-loading="loading">
      <el-table-column type="selection" width="64"  fixed="left" :reserve-selection="true"></el-table-column>
      <el-table-column  label="邮箱" width="208" prop="email" align="left"></el-table-column>
      <el-table-column  label="订单号"  width="200"   prop="order_no" ></el-table-column>
      <el-table-column  label="产品型号名称" width="120"  prop="product_model_name" > </el-table-column>
      <el-table-column  label="产品名称"  width="264" prop="product_title" align="left"></el-table-column>
      <el-table-column  label="产品图片" width="120"  align="left">
        <template slot-scope="scope" @click.stop>
         <div  class="comment_image">
           
           <!-- <el-image :src="scope.row.product_image"  ></el-image> -->
            <el-image v-for="item in scope.row.httpImage" :key="item"  :preview-src-list="scope.row.httpImage" :src="item"  ></el-image>
          </div>
        </template>
        
      </el-table-column>
      <el-table-column  label="产品编码"  width="120"   prop="product_name" ></el-table-column>
      <el-table-column  label="ASIN"  width="160"   prop="asin" align="left">      </el-table-column>
      <el-table-column  label="一级类型" width="142"  prop="first_type" align="left" > </el-table-column>
      <el-table-column  label="二级类型"  width="144" prop="second_type" align="left"></el-table-column>
      <el-table-column  label="保修状态" width="200" prop="warranty_status" ></el-table-column>
      <el-table-column  label="购买日期"  width="200"   prop="buy_time"></el-table-column>
      <el-table-column  label="预估保修截止日期" width="200"  prop="warranty_expiration_date">
        <template slot-scope="scope" @click.stop>
         <div v-if="scope.row.warranty_expiration_date"> {{scope.row.warranty_expiration_date}}</div>
          <div v-else>永久保修</div>
        </template>
      </el-table-column>
      <el-table-column  label="是否换货"  width="160" prop="is_replacement" ></el-table-column>
      <el-table-column  label="换货详情" width="160" prop="is_buy_thirty_day" >
        <template slot-scope="scope" >
          <div  class="content_details"  @click.stop.prevent="setCurRow(scope.row, 'details')">
            <i class="iconfont icon-details_normal"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column  label="创建时间" width="200" prop="create_time" ></el-table-column>
    </el-table>
    <el-pagination ref="pagination" background :page-sizes="pageSizes" :total="total"  :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange" :current-page="page"
      @current-change="handleCurrentChange"></el-pagination>
    <Export v-show="exportShow" :show="exportShow" @closeDialog="closeExportDialog"></Export>
    <Details v-show="detailShow" :show="detailShow" @closeDialog="closeDeTailDialog"></Details> 
  </div>
</template>

<script>
import { Export, Details } from './components'
import { deviceList } from '@/api/customer/equipment.js'
import { setSearchParams } from '@/utils/index.js'

import { firstTypeList, secondTypeList } from '@/api/product/productType.js'
import { erpProducNameList } from '@/api/product/productBasic.js'
import { productModelNameList } from '@/api/product/productBasic.js'

export default {
  name: 'equipment',
  data() {
    return {
      firstTypeList: [], //一级类型下拉框
      secondTypeList: [], //二级类型下拉框
      productNameList: [],
      productModelNameList: [],
      searchForm: {
        email: { value: '', op: 'like' },
        order_no: { value: '',op: 'like' },
        product_model_name: { value: '', op: '=' },
        product_title: { value: '',op: 'like' },
        product_name: { value: '',op: 'like' },
        asin: { value: '',op: 'like' },
        first_type: { value: '',op: '=' },
        second_type: { value: '', op: '=' },
        warranty_status: { value: '', op: '=' },
        buy_time: {value: '', op: 'RANGE'},
        warranty_expiration_date: {value: '', op: 'RANGE'},
        is_replacement: {value: '', op: '='},
      },
      warrantyStatusList:[
        {value: '1', label: '保内'},
        {value: '2', label: '保外'},
      ],
      isExchangeList:[
        {value: '1', label: '是'},
        {value: '2', label: '否'},
      ],
      pageSizes: [20, 50, 100],
      total: 10,
      pageSize: 20,
      page: 1,
      exportShow: false,
      checkShow: false,
      curList: [],
      nameCnList: [] ,// 国家种文名下拉框
      curId: null,
      tableH: null,
      curIdList: [],
      selectList: [],
      loading: false,
      isExpand: false,
      localTimePicker: '',
      localTime: '',
      updateTimePicker: '',
      updateTime: '',
      detailShow: false,
    }
  },
  watch:{
    localTimePicker:function(n){
      if(n==null){
        this.localTime = ""
      }
    },
    updateTimePicker:function(n){
      if(n==null){
        this.updateTime = ""
      }
    }
  },
  created(){
    this.getTableList()
  },
  mounted(){
    let that = this;
    that.setTableHeight()
    // 注：window.onresize只能在项目内触发1次
    window.onresize = function windowResize () {
        // 通过捕获系统的onresize事件触发我们需要执行的事件
      that.setTableHeight()
    }
  },
  methods: {
    setCurRow(row, type) {
      this.curList = []
      this.curList.push(row.id)
      this.curId = row.id
       if (type == 'details') {
        this.closeDeTailDialog()
      }
    },
    closeDeTailDialog () {
      this.detailShow =  !this.detailShow
    },
    getProductModelName () {
      productModelNameList().then(res=>{
        if(res.state ==1){
          this.productModelNameList = res.data
        }
      })
    },
    clearFirstType () {
      this.searchForm.second_type.value = ""
      this.secondTypeList = []
    },
    getFirstTypeList (){
      let params = {
        site_id: 'all'
      }
      firstTypeList(params).then(res=>{
        this.firstTypeList = res.data
      })
    },
    getSecondTypeList(){ // 二级类型
      let params = {
        first_type: this.searchForm.first_type.value,
        site_id: 'all'
      }
      if(params.first_type){
        secondTypeList(params).then(res=>{
          this.secondTypeList = res.data
        })
      }else{
        this.$message.error('请先选择一级类型')
      }
    },
    getProductNameList () {
       erpProducNameList().then(res=>{
        if(res.state == 1){
          this.productNameList = res.data
        }
      })
    },
    changeLocalTime (arr) {
      if(arr){
        let str = arr[0] + ' - ' + arr[1]
        this.localTime = arr[0].split(' ')[0] +' - '+arr[1].split(' ')[0]
        this.searchForm.buy_time.value = str
      }else{
        this.searchForm.buy_time.value = null
      }
      this.getTableList()
    },
    changeUpdateTime (arr) {
      if(arr){
        let str = arr[0] + ' - ' + arr[1]
        this.updateTime = arr[0].split(' ')[0] +' - '+arr[1].split(' ')[0]
        this.searchForm.warranty_expiration_date.value = str
      }else{
        this.searchForm.warranty_expiration_date.value = null
      }
      this.getTableList()
    },
    isExpandForm () {
      this.isExpand = !this.isExpand
      if(this.isExpand ) {
        this.tableH = parseInt(this.tableH) - 43 + 'px'
      }else {
        this.tableH = parseInt(this.tableH) + 43 + 'px'
      }

    },
    RowClick (row) {
      this.$refs.table.toggleRowSelection(row);
    } ,
    setTableHeight(){
      let searchFormH = this.$refs.form.$el.offsetHeight;
      let manageMenuH = this.$refs.content.offsetHeight;
      let btnContainerH = this.$refs.btn.offsetHeight;
      let paginationH = this.$refs.pagination.$el.offsetHeight
      let tableHeight = manageMenuH  - btnContainerH - searchFormH - paginationH - 48 - 24 - 24
      this.tableH = tableHeight +'px' 
    },

    getTableList(){
      this.loading = true
      let params = setSearchParams(this.searchForm, this.pageSize, this.page)
      deviceList(params).then(res=>{
        let list = res.data.data
        if( list.length == 0 && this.page > 1){
          this.page -= 1
          this.getTableList()
        }
        let idList = []
        for(let i = 0; i < list.length; i++){
          if(list[i].status == 1) {
            list[i].statusBoolean = true
          } else {
            list[i].statusBoolean = false
          }
          list[i].httpImage = []
          list[i].httpImage.push(list[i].product_image)
          idList.push(list[i].id)
        }
        this.curIdList = idList
        this.listTable = list
        this.total = res.data.total
        this.page = res.data.current_page
        this.$refs.table.clearSelection()
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableList()
     
    },
    handleCurrentChange(val) {
      this.page = val
      this.getTableList()
      this.$refs.table.clearSelection()
    },
    closeExportDialog(){
      this.exportShow = !this.exportShow
      if(!this.exportShow){
        this.getTableList()
      }
    },
    rowClassName({row}){
      let rowClass = "tableRowClass"
       if(row.statusSelection){
        rowClass += ' selectRow'
      }
      return rowClass
    },
    handleSelectionChange(list){
      let array = []
      for(let i = 0; i < list.length; i++ ){
        array.push(list[i].id)
      }
      this.curList = array

      // 选中行的样式赋值
      for(let i in this.selectList){
        this.selectList[i].statusSelection = false
      }
      for (let item in list){
        list[item].statusSelection = true
      }
      this.selectList = list
    },
     // 重置按钮
    resetForm(){
      for(let item in this.searchForm){
        this.searchForm[item].value =""
      }
      this.localTime = ""
      this.updateTime = ''
      this.updateTimePicker =''
      this.localTimePicker = ''
      this.getTableList()
    },

  },
  components: { Export, Details }

}
</script>

<style lang="scss">
@import '@/styles/customer/device.scss';


</style>